<template>
  <div class="max_box" v-show="$store.state.isShowLogin">
    <div class="div_bg" @click="closeLogin"></div>
    <div class="div_content">
      <img
        src="@/assets/images/login/userArrow.png"
        @click="closeLogin"
        alt=""
        class="close"
      />
      <section>
        <span :class="{ active: showphone }" @click="showphone = true"
          >手机号码登录</span
        >
        <span :class="{ active: !showphone }" @click="weideng"
          >微信扫码登陆</span
        >
      </section>
      <div class="phoneLogin" v-show="showphone">
        <div class="user">
          <input
            type="number"
            placeholder="请输入手机号"
            v-model="PhoneVal"
            oninput="if(value.length>11)value=value.slice(0,11)"
          />
        </div>
        <!-- 滑块验证码 -->
        <div class="verify_box">
          <slide-verify
            :l="42"
            :r="10"
            :w="367"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
          ></slide-verify>
          <div>{{ msg }}</div>
        </div>
        <div class="tanxin yanzhen">
          <input
            type="number"
            placeholder="请输入短信验证码"
            v-model="yanzhenVal"
            oninput="if(value.length>4)value=value.slice(0,4)"
          />
          <button
            @click="huoquyanzhengma"
            :disabled="isdisabled"
            :class="{ active: yanBgc }"
          >
            {{ getyanzhenmaVal }}
          </button>
        </div>
        <button
          class="btn"
          @click="denglu"
          :disabled="$store.state.dengdisabled"
        >
          登录
        </button>
      </div>
      <div id="weixin" v-show="!showphone"></div>
    </div>
  </div>
</template>

 <script>
import { GetCodeApi, DengluApi, bindWePhoneApi } from "@/request/api.js";
export default {
  data() {
    return {
      showphone: true,
      msg: "",
      PhoneVal: "18684074306",
      yanzhenVal: "3505",
      getyanzhenmaVal: "获取验证码",
      isdisabled: false,
      yanBgc: false,
      yanzhenNumber: 0,
    };
  },

  methods: {
    closeLogin() {
      this.$store.commit("changeIsShowLogin", false);
      this.PhoneVal = this.yanzhenVal = "";
    },
    onSuccess() {
      this.msg = "验证成功";
    },
    onFail() {
      this.msg = "验证失败";
    },
    onRefresh() {
      this.msg = "";
    },
    panduan() {
      let s =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      return s.test(this.PhoneVal);
    },
    // 提示框
    tishi(value, icon) {
      this.$store.dispatch("AsyncToast", { value, icon });
    },

    denglu() {
      if (!this.panduan()) {
        this.tishi("手机号码错误", "danger");
        return;
      }
      if (this.msg !== "验证成功") {
        this.tishi("拼图未成功", "info");
        return;
      }
      if (this.yanzhenVal == "") {
        this.tishi("验证码为空", "danger");
        return;
      }
      // 刚才我们知道  如果存在 uuid 的东西 ，就是微信扫码登录得到的
      // 如果不存在 uuid  就是 手机号登录
      let uuid = sessionStorage.getItem("uuid");
      if (uuid) {
        // 如果存在 uuid 的东西 ，证明就是微信扫码登录得到的
        bindWePhoneApi({
          phone: this.PhoneVal,
          verifyCode: this.yanzhenVal,
          uuid: uuid,
        }).then((res) => {
          console.log(res);
          if (res.data.code === 0) {
            localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
            this.tishi(res.data.message, "success");
            this.$emit("updataKeyFn");
            this.$store.commit("changeIsShowLogin", false);
          }
        });
      } else {
        DengluApi({
          verifyCode: this.yanzhenVal,
          phone: this.PhoneVal,
        }).then((res) => {
          if (res.data.code === 0) {
            // 存储token
            localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
            // 提示登录成功
            this.tishi("登录成功", "success");
            // 关闭登录框
            this.$store.state.isShowLogin = false;
            this.$store.state.isLogin = true;
            location.reload()
          }
        });
      }
    },
    huoquyanzhengma() {
      if (this.PhoneVal == "") {
        this.tishi("请输入号码在请求", "info");
        return;
      }
      if (!this.panduan()) {
        this.tishi("电话号码错误", "info");
        return;
      }
      if (this.msg !== "验证成功") {
        this.tishi("拼图未成功", "info");
        return;
      }
      GetCodeApi({ phone: this.PhoneVal }).then((res) => {
        if (res.data.code === 0) {
          // 设置样式
          this.yanBgc = true;
          // 禁用按钮
          this.isdisabled = true;
          // 倒计时
          this.getyanzhenmaVal = "60s";
          let s = 60;
          const timer = setInterval(() => {
            s--;
            this.getyanzhenmaVal = s + "s";
            if (s == -1) {
              this.yanBgc = false;
              clearInterval(timer);
              this.tishi(res.data.message, "success");
              this.getyanzhenmaVal = "获取验证码";
              this.isdisabled = false;
            }
          }, 1000);
        } else {
          this.tishi(res.data.message, "danger");
        }
      });
    },
    weideng() {
      this.showphone = false;
      let _this = this;
      new WxLogin({
        id: "weixin",
        appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
        scope: "snsapi_login",
        // 扫码成功后重定向的接口
        redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
        // state填写编码后的url
        state: encodeURIComponent(
          window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)
        ),
        // 调用样式文件
        href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogICAgZGlzcGxheTogbm9uZTsNCn0NCg0KLmltcG93ZXJCb3ggLnFyY29kZXsNCiAgICB3aWR0aDogMjUwcHg7DQogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0yNnB4KTsNCn0=",
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.max_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .div_bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }
  .div_content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 555px;
    height: 423px;
    background-image: url(@/assets/images/login/loginBg.png);
    section {
      text-align: center;
      margin-top: 50px;
      font-size: 16px;
      line-height: 16px;
      span {
        display: inline-block;
        padding: 0 15px;
        color: #999;
        &.active {
          color: @black;
          font-weight: 700;
        }
      }
      :first-child {
        border-right: 1px solid #999;
      }
    }
    .phoneLogin {
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }

      input[type="number"] {
        -moz-appearance: textfield;
      }

      .user {
        text-align: center;
        margin-top: 25px;
        input {
          outline: none;
          height: 50px;
          width: 360px;
          text-indent: 1em;
          font-size: 16px;
          border: 1px solid #ccc;
        }
      }
      .verify_box {
        width: 367px;
        margin: 0 auto 20px;
        /deep/.slide-verify {
          width: 100% !important;
          .slide-verify-refresh-icon {
            position: absolute;
            top: -150px;
            display: none;
          }
          canvas {
            position: absolute;
            top: -150px;
            left: 0;
            display: none;
            box-sizing: border-box;
          }
          &:hover {
            canvas {
              display: block;
            }
            .slide-verify-refresh-icon {
              display: block;
            }
          }
        }
      }
      .yanzhen {
        margin-top: 20px;
        height: 50px;
        input {
          margin-left: 73px;
          width: 260px;
          text-indent: 1em;
          transform: translateX(20px);
          outline: none;
          border: 1px solid #ccc;
        }
        button {
          border: none;
          text-align: center;
          width: 80px;
          color: @black;
          transform: translateX(-93px);
          line-height: 50px;
          background-color: @blue;
          padding: 0 5px;
          cursor: pointer;
          color: #ccc;
          &.active {
            background-color: #dfdfdf;
            color: @black;
          }
        }
      }
      .btn {
        border: none;
        transform: translateX(92px);
        margin: 20px auto;
        height: 50px;
        width: 370px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        background-color: @blue;
        cursor: pointer;
      }
    }
  }
  .close {
    position: absolute;
    top: 12px;
    right: 57px;
    cursor: pointer;
  }
}
span {
  cursor: pointer;
}
#weixin {
  transform: translateY(30px);
  margin-top: 30px;
  margin-right: 30px;

  width: 250px;
  margin: 0 auto;
}
</style>